<template>
    <z-paging>
        <view style="width: 100%; position: absolute;z-index: 99999;top: 0;
        height: 200rpx">
            <hedsty></hedsty>
        </view>
        <view class="one_box">欢迎使用摩根潮玩</view>
        <view class="two_box">激发无限大的想象</view>
        <view class="pic_box">
            <image src="https://morgan.dingxians.cn/static/login/login.png" mode="scaleToFill" />
        </view>
       <!-- #ifndef MP-ALIPAY -->
       <view class="denglu_box1" @click="$router('/userPage/login/login')" v-if="loginStatus == 1">手机号登录</view>
       <view class="denglu_box1" @click="Login" v-if="loginStatus == 0">快捷登录</view>
       <!-- #endif -->
        <view class="xieyi_box">
            <view class="xieyista_box" @click="agrStabtn">
                <image src="https://morgan.dingxians.cn/static/login/wsel.png" v-if="!agreeSta" mode="scaleToFill" />
                <image src="https://morgan.dingxians.cn/static/login/sel_imag.png" v-else mode="scaleToFill" />
            </view>
            <view class="xieyitetx_box">已阅读并同意<text @click="$router('/userPage/agree/agreen?status=' + 'user_agree' + '&title=' + '用户协议')">《用户协议》</text>和<text @click="$router('/userPage/agree/agreen?status=' + 'privacy' + '&title=' + '隐私政策')">《隐私政策》</text></view>
        </view>

        <u-popup v-model="getnickshow" mode="bottom" :show="getnickshow" round='16rpx' :mask-close-able="false">
            <view class="getnickbox">

                <view class="flex_align_center">
                    <image :src="project.logo" class="logoimg" mode="aspectFit"></image>
                    <view class="name">
                        {{ project.name }}
                        <text>申请</text>
                    </view>
                </view>
                <view class="m1 mt30">获取你的头像、昵称</view>
                <view class="m2">展示个人信息</view>
                <view class="xin1">
                    <button type="default" class="flex_spacebetween buttoncss" open-type="chooseAvatar"
                        @chooseavatar="chooseavatar">
                        <view class="flex_align_center toubox">
                            <view class="t1">头像</view>
                            <image v-if="avatarUrl == ''" src="https://www.dingxians.cn/upload/images/user/avatar.png"
                                class="avatarimg"></image>
                            <image v-else :src="avatarUrl" class="avatarimg"></image>
                        </view>
                        <u-icon name="arrow-right" size="25" color="#999"></u-icon>
                    </button>
                </view>
                <view class="nick">
                    <view class="n1">昵称:</view>
                    <input type="nickname" @blur="bindBlur" v-model="wxNickname" placeholder="点击获取昵称">
                </view>
                <view class="nick">
                    <view class="n1">手机号:</view>
                    <button class="phone_box" open-type="getPhoneNumber" @getphonenumber="headgetphonenumber">
                        <text class="dhh_box" v-if="phoneNumber">{{ phoneNumber || '' }}</text>
                        <text v-else>点击获取手机号</text>
                    </button>

                </view>
                <view class="enter_box" @click="loginWeixin">
                    确认
                </view>
            </view>
        </u-popup>
    </z-paging>
</template>
<script>
import hedsty from '../../components/hedsty.vue'
export default {
    components: {
        hedsty
    },
    data() {
        return {
            agreeSta: false,
            getnickshow: false,
            project: {
                name: '',
                logo: '',
            },
            avatarUrl: '',
            wxNickname: "",
            phoneNumber: '',
            loginStatus: 1,
            token: '',
            authCode:''
        }
    },
    onShow() {
        // #ifdef MP-WEIXIN
        this.getProgram()
        // #endif
        this.usersHide_wx_login()
    },
    methods: {
        agrStabtn() {
            this.agreeSta = !this.agreeSta
        },
        Login() {
            if (!this.agreeSta) {
                this.$msg('请先同意协议')
            } else {
                // #ifdef APP-PLUS
                this.appLogin()
                // #endif
                // #ifdef MP-WEIXIN
                this.wxLogin()
                // #endif
            }

        },
        wxLogin() {
            let that = this
            uni.login({
                provider: 'weixin',
                success: (res) => {
                    that.getUser(res.code)
                },
                fail: function (err) {
                    console.log("登录授权失败", err);
                }
            })
           
        },
        appLogin() {
            uni.login({
                "provider": "weixin",
                "onlyAuthorize": true, // 微信登录仅请求授权认证
                success: (event) => {
                    let data = {
                        code: event.code,
                    }
                    console.log(data)
                    this.$Request.post(this.$api.logins.usersWx_login, data).then(res => {
                        console.log(res,'1234567yqwertgh')
                        if (res.code == 200) {
                            uni.setStorageSync('userInfo', res.data)
                            if (res.data.is_mobile) {
                                uni.setStorageSync('token', res.data.token)
                                setTimeout(() => {
                                    uni.switchTab({
                                        url: '/pages/index/index'
                                    })
                                })
                            } else {
                                setTimeout(() => {
                                    uni.redirectTo({
                                        url: '/userPage/login/login?token=' + res.data.token
                                    })
                                }, 1000)
                            }
                        }

                    })
                },
                fail: function (errs) {
                    // 登录授权失败
                    console.log(errs, "errs")
                }
            })
        },



        getUser(js_code) {
            let data = {
                js_code,
                scene: uni.getStorageSync('bind_id')
            }
            console.log(data)
            this.$Request.post(this.$api.logins.usersMini_login, data).then(res => {
                if (res.code == 200) {
                    this.token = res.data.token
                    if (res.data.is_mobile) {
                        this.$msg('登录成功')
                        uni.setStorageSync("token", this.token)
                        setTimeout(() => {
                            uni.switchTab({
                                url: '/pages/index/index'
                            })
                        }, 600)
                    } else {
                        this.getnickshow = true
                    }

                }
            })
        },

        // 获取小程序的 logo 和 名称
        getProgram() {
            uni.getSystemInfo({
                success: (res) => {
                    console.log(res)
                    this.project.name = res.appName
                }
            })
            this.project.logo = __wxConfig.accountInfo.icon
        },
        chooseavatar(e) {
            let file = e.detail.avatarUrl
            var uploadurl = "https://morgan.dingxians.cn/api/common/upload?token=" + this.token
            uni.uploadFile({
                url: uploadurl,
                filePath: file,
                name: 'file',
                // formData: {
                //     'openid': this.openId
                // },
                success: (res) => {
                    let urlData = JSON.parse(res.data)
                    this.avatarUrl = urlData.data.url



                }
            });
        },
        bindBlur(e) {
            this.wxNickname = e.detail.value
        },
        headgetphonenumber(e) {
            console.log(e)
            let data = {
                code: e.detail.code
            }
            console.log(data)
            this.$Request.post(this.$api.logins.usersGetMobile + '?token=' + `${this.token}`, data).then(res => {
                if (res.code == 200) {
                    this.phoneNumber = res.mobile
                }
            })
        },
        loginWeixin() {
            if (this.nickname == '' && this.file == '' && this.phoneNumber == '') {
                this.$toast('请获取头像，昵称，手机号')
            } else if (this.wxNickname == '') {
                this.$toast('请输入昵称')
            } else if (this.avatarUrl == '') {
                this.$toast('请选择头像')
            } else if (this.phoneNumber == '') {
                this.$toast('请输入手机号')
            } else {
                this.editInfo()
            }
        },
        editInfo() {
            let data = {
                nickname: this.wxNickname,
                avatar: this.avatarUrl,
            }
            this.$Request.put(this.$api.user.users + '?token=' + `${this.token}`, data).then(res => {
                if (res.code == 200) {
                    this.$msg('登录成功')
                    uni.setStorageSync("token", this.token)
                    setTimeout(() => {
                        uni.switchTab({
                            url: '/pages/index/index'
                        })
                    }, 600)
                }
            })

        },
        usersHide_wx_login() {
            this.$Request.get(this.$api.logins.usersHide_wx_login).then(res => {
                if (res.code == 200) {
                    this.loginStatus = res.msg
                }
            })
        },

    }
}
</script>
<style lang="scss" scoped>

.one_box {
    width: 100%;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 52rpx;
    color: #FFFFFF;
    line-height: 50rpx;
    box-sizing: border-box;
    top: 425rpx;
    padding-left: 81rpx;
    position: absolute;
    z-index: 2;
}

.two_box {
    position: absolute;
    width: 100%;
    height: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    box-sizing: border-box;
    top: 500rpx;
    padding-left: 81rpx;
    color: #FFFFFF;
    line-height: 26rpx;
    z-index: 2;
}

.pic_box {
    width: 430rpx;
    height: 450rpx;
    position: absolute;
    top: 176rpx;
    right: 44rpx;
    z-index: 1;

    image {
        width: 100%;
        height: 100%;
    }
}


.denglu_box1 {
    margin: auto;
    margin-top: 600rpx;
    width: 560rpx;
    height: 88rpx;
    background: linear-gradient(180deg, #FF4242, #FF6666);
    border-radius: 44rpx;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 36rpx;
    color: #FFFFFF;
    line-height: 88rpx;
    text-align: center;
    margin-bottom: 40rpx;
}

.denglu_box {
    margin: auto;
    width: 560rpx;
    height: 88rpx;
    background: linear-gradient(180deg, #FF4242, #FF6666);
    border-radius: 44rpx;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 36rpx;
    color: #FFFFFF;
    line-height: 88rpx;
    text-align: center;
    margin-bottom: 600rpx;
}

.xieyi_box {
    width: 100%;
    height: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .xieyista_box {
        width: 30rpx;
        height: 30rpx;
        margin-right: 10rpx;

        image {
            width: 30rpx;
            height: 30rpx;
        }
    }

    .xieyitetx_box {
        height: 40rpx;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #E2E2E2;
        line-height: 44rpx;

        text {
            color: rgba(254, 67, 67, 1);
        }
    }
}


.getnickbox {
    padding: 40rpx 20rpx;
    border-radius: 30rpx 30rpx 0 0;
    background-color: #fff;

    .logoimg {
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
    }

    .name {
        margin-left: 20rpx;

        text {
            margin-left: 10rpx;
        }
    }

    .m1 {
        font-weight: 500;
    }

    .m2 {
        padding-bottom: 30rpx;
        border-bottom: 1rpx solid #f2f2f2;
        color: #999;
        padding-top: 10rpx;
        font-size: 24rpx;
    }

    .xin1 {
        border-bottom: 1rpx solid #f2f2f2;
        margin-bottom: 30rpx;

        .toubox {
            padding: 10rpx 0;
            display: flex;
            align-items: center;

            .t1 {
                font-size: 28rpx;
                margin-right: 30rpx;
            }

            .avatarbox {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                border: 1rpx solid #f2f2f2;
            }

            .avatarimg {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
            }
        }
    }


    .buttoncss {
        background-color: #fff;
        border-radius: 0px;
        border: 0rpx solid transparent;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    button::after {
        border: 0px solid rgba(0, 0, 0, .2);
    }

    .nick {
        padding-bottom: 30rpx;
        border-bottom: 2rpx solid #f2f2f2;
        display: flex;
        align-items: center;
        padding-left: 14px;
        padding-right: 14px;
        margin-bottom: 10rpx;

        .n1 {
            font-size: 28rpx;
            margin-right: 30rpx;
        }

        .phone_box {
            background: none;
            width: 530rpx;
            font-size: 28rpx;
            color: #999;
            text-align: left;
            padding-left: 0;
        }

        .dhh_box {
            color: #333;
        }
    }

    .enter_box {
        width: 280rpx;
        height: 100rpx;
        border-radius: 20rpx;
        background: rgba(26, 194, 121, 1);
        margin: 10rpx auto;
        text-align: center;
        line-height: 100rpx;
        font-size: 36rpx;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);

    }

    .mt30 {
        margin-top: 30rpx;
    }
}
</style>